<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="./libs/vue.js"></script>
        <style>
            .classA {
                background: red;
            }
            .classB {
                background: green;
            }
            .classC {
                background: blue;
            }
          </style>
    </head>

    <body>
        <!-- 状态 -->
        <div id = "v_test1">
            {{116 * 151}}
            <br/>
            <a>当前用户:</a>
            {{lyname}}
        
            <!-- 指令 -->
            <div v-html = "dom_html"></div>
            <!-- 动态显示和隐藏 -->
            <div v-show = "auto_show">显示与隐藏</div>

            <!-- 动态创建和删除 -->
            <div v-if = "auto_creat">创建与删除-if</div>
            <div v-else>创建与删除-else</div>
 
            <!-- v-if v-else-if v-else -->
            <ul v-if = "witch===1">
                <li v-for = "(data, index) in datalist" key = "data">
                    {{index}}---{{data}}
                </li>
                <li v-for = "(data, key) in dataObj">
                    {{key}}---{{data}}
                </li>
            </ul>
            
            <div v-else-if = "witch===2">v-else-if</div>
            <div v-else>
                {{datalist}}
            </div>
            <!-- class 动态操作-->
            <div :class = "classObj">class动态绑定-对象classObj</div>
            <div :class = "classArr">class动态绑定-对象classArr</div>

            <!-- style 动态操作 -->
            <div :style = "styleObj">style动态绑定-对象styleObj</div>
            <div :style = "styleArr">style动态绑定-数组styleArr</div>
        </div>

        <!--  Vue脚本代码 -->
        <script type = "text/javascript">
            var vm = new Vue({
                el: "#v_test1",
                data: {
                    lyname: "李炎",
                    dom_html: "<a href=javascript:location.href=location.origin+location.pathname+'#username=ly'>切换用户</a>",
                    auto_show: true,
                    auto_creat: true,
                    witch: 1,
                    datalist: ["datalist1", "datalist2"],
                    dataObj: {
                        id: 1,
                        name: "ly",
                        sex: "man"
                    },
                    classObj: {
                        classA: true,
                        classB: true,
                        classC: true
                    },
                    classArr: ["classA", "classB", "classC"],
                    styleObj: {
                        background: "red"
                    },
                    styleArr: [{background: "red"}, {background: "green"}],
                },
                
            })
            function switchUser() {
                if (location.hash[0] === '#') {
                    var v_hash = location.hash.substring(1);
                    vm.lyname = v_hash.substring(v_hash.indexOf('username=') + 9);
                    // location.reload();
                }
            };
            switchUser();
            window.addEventListener("hashchange", switchUser);
            
        </script>
    </body>
</html>